<template>
  <div class="common-layout">
    <template>
<div>
    <!-- 视频播放器 -->
    <vue3VideoPlay
        width="100vw"
        height="92.6vh"
        ref="videoPlayer"
        class="video-player"
        :playsinline="true" 
        v-bind="playerOptions"
        @play="onPlay"
        @pause="onPause" 
        @timeupdate="onTimeupdate" 
        @canplay="onCanplay">
    </vue3VideoPlay>
</div>
</template>
    <el-container>
      <!-- 菜单 -->
      <el-aside style="width: unset;">
        <el-menu active-text-color="#ffd04b" background-color="#409eff" class="el-menu-vertical-demo" default-active="2"
          text-color="#fff" @open="handleOpen" @close="handleClose" :router="true" :collapse="isCollapse">
          <el-menu-item style="height: 60px;background-color: #0078d4;" id="menuone" aria-readonly="true">
            <img src="../assets/logo.png" style="width: 1.5em; height: 1.5em; margin-right: 8px" alt="">
            <span>后台管理系统</span>
          </el-menu-item>
          <el-sub-menu index="2">
            <template #title>
              <Edit style="width: 1em; height: 1em; margin-right: 8px" />
              <span>物业</span>
            </template>
            <el-menu-item index="/cellinfomation">小区管理</el-menu-item>
             <el-menu-item index="/Asset">小区资产管理</el-menu-item>
             <el-menu-item index="/Warranty">保修管理</el-menu-item>
            <el-menu-item index="/TollDetails">缴费明细管理</el-menu-item>
            <el-menu-item index="/complaints">投诉管理</el-menu-item>
            <el-menu-item index="/property">房产管理</el-menu-item>
            <el-menu-item index="/Parking">停车管理</el-menu-item>
          </el-sub-menu>
          <el-sub-menu index="3">
            <template #title>
              <Edit style="width: 1em; height: 1em; margin-right: 8px" />
              <span>业主</span>
            </template>
            <el-menu-item index="">房产管理</el-menu-item>
            <el-menu-item index="">保修管理</el-menu-item>
            <el-menu-item index="/Complaints1">投诉管理</el-menu-item>
            <el-menu-item index="">收费管理</el-menu-item>
            <el-menu-item index="">停车管理</el-menu-item>
            <el-menu-item index="/Property_management">房产管理</el-menu-item>
            <el-menu-item index="/Owparking">停车管理</el-menu-item>
          </el-sub-menu>
        </el-menu>
      </el-aside>
      <!-- 内容 -->
      <el-container>
        <el-container style="background-color: rgb(220, 227, 221);">
          <!-- 头部 -->
          <el-header style="background-color: antiquewhite;">
            <div class="header">
              <div class="headLeft">
                <!-- 展开/收起左侧菜单栏图标 -->
                <img :src="menuImgSrc" @click="menuImg">
                <!-- 面包屑导航栏 -->
                <BreadVue />
              </div>
              <!-- 头像 -->
              <div class="headRight">
                <el-dropdown button  @click="handleClick" style="border: none;">
                  <el-avatar src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png" />
                  <template #dropdown>
                    <el-dropdown-menu>
                      <el-dropdown-item>个人信息</el-dropdown-item>
                      <el-dropdown-item>修改密码</el-dropdown-item>
                      <el-dropdown-item>退出登录</el-dropdown-item>
                    </el-dropdown-menu>
                  </template>
                </el-dropdown>
              </div>
              <!-- <h1>欢迎{{ userName }}来到后台管理系统</h1> -->

            </div>
          </el-header>
          <!-- 页面 -->
          <el-main class="box">
            <!-- <div class="box"> -->
            <video class="videoStyle" id="Id" playsinline="true" autoplay="true" muted="false" loop="true" >
         <source src="../../video/（无水印）唯美治愈素材分享 第6期.mp4" type="video/mp4">
        </video>
      <!-- </div> -->
            <router-view />
          </el-main>
          <!-- 底部 -->
          <el-footer style="background-color: antiquewhite;">
            <div class="footer">
              <span></span>
            </div>
          </el-footer>
        </el-container>
      </el-container>
    </el-container>
  </div>
</template>

<script>
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue'
import login from '@/components/Login.vue'
import { reactive } from 'vue';
// 导入面包屑
import BreadVue from '../components/Bread.vue'

export default {
  name: 'HomeView',
  components: {
    HelloWorld,
    login,
    BreadVue
  },
  data() {
    return {
      userName: this.$router.currentRoute.value.query.name,
      isCollapse: false,
      menuImgSrc: require("../assets/menuclose.png"),
      breadList: []
    }
  },
  mounted() {

  }, methods: {
    //切换左边菜单栏展开/收起
    menuImg: function () {
      this.isCollapse = !this.isCollapse;
      this.menuImgSrc = this.isCollapse ? require("../assets/menuopen.png") : require("../assets/menuclose.png");
      // if (this.isCollapse) {
      //   this.menuImgSrc = require("../assets/menuopen.png")
      // }else{

      // }
    },
    getBreadcrumb() {
      let matched = this.$route.matched;
      //如果不是首页
      if (!this.isHome(matched[0])) {
        matched = [{ path: "/home", meta: { title: "首页" } }].concat(matched);
      }
      this.breadList = matched;
    }
  }
}
const playerOptions = reactive({
    //width: "100vw",  //播放器宽度
    //height: "92.6vh",  //播放器高度
    //color: "#000000",  //主题色
    title: "首页",  //视频名称
    type: "video/mp4",
 
    // poster: require('封面地址'),  //因为是本地图片，前面加require
    src: require('../../video/（无水印）唯美治愈素材分享 第6期.mp4'),  //因为是本地视频，前面加require
 
    speedRate: ["2.0", "1.0", "1.5", "1.25", "0.75", "0.5"],  //视频倍速
    autoplay: true,  //浏览器准备好时自动开始回放。
    muted: false,  // 默认情况下将会消除任何音频。
    webFullScreen: false,  //全屏
    loop: true,  //循环播放
    mirror: false,  //镜像画面
    ligthOff: false,  //关灯模式
    volume: 0.3,  //默认音量大小
    preload: 'auto',  //预加载
    //speed: false,  // 关闭进度条拖动
    language: 'zh-CN',
    aspectRatio:'16:9',// 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值（值应该代表一个比例）。
    fluid: true, // 当true时，Video.js player将按比例缩放以适应其容器。
 
    //notSupportedMessage: '此视频暂无法播放，请稍后再试',
    //timeDivider: false,   //当前时间和持续时间的分隔符
    //durationDisplay: false,   //显示持续时间
    //remainingTimeDisplay: false,  //是否显示剩余时间功能
    //fullscreenToggle: false,  //全屏按钮
    //showPlayButton: false,   //播放按钮
    control: false,  //隐藏控制条
    autoplay: true,    //浏览器准备好时自动开始回放。
    muted: true,    //静音
});
</script>
<style>
* {
  margin: 0px;
  padding: 0px;
}
.box {
  width: 100%;
  height:calc(100vh - 40px);
  background-color: rgb(141, 130, 130);
  position: relative;
}
video {
  height: calc(100vh - 40px);
  background-size:100% 100%;
  width: 100%;
  position: absolute;
  /* filter: blur(1px); */
  top: 0;
  left: 0;
}
.video-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: calc(100vh - 40px);
}

/* 设置菜单高度 */
.el-menu-vertical-demo {
  /* background-color: #2f3c4d; */
  height: 100vh;
  overflow-y: auto;
  color: #fff;
}

/* 设置菜单栏第一行下拉图标隐藏 */
#menuone .el-icon,
#menuone .is-opened {
  display: none;
}

/* 头部 */
.header {
  height: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.headLeft {
  /* width: 50px; */
  height: 100%;
  line-height: 60px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-left: -15px;

}

.headLeft img {
  width: 20px;
  height: 20px;
  margin-right: 10px;
}

.headLeft img:hover {
  cursor: pointer;
}

/* 底部 */
/* .footer {
  background-color: antiquewhite;
  width: 100%;
  height: 100%;
} */
</style>
